<style lang="scss" scoped>
	.mod-nav-bar{
		width: 750rpx;
		.fixed-wrap{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			background: v-bind(COLOR_THEME_PRIMARY);
			z-index: 8000;
			.status-bar{
				width: 100%;
				height: v-bind(statusBarHeight);
			}
			.title-bar{
				display: flex;
				width: 100%;
				text-align: center;
				justify-content: space-between;
				align-items: center;
				height: v-bind(titleBarHeight);
				color: v-bind(titleColor);
				padding: 0 32rpx;
				font-size: 32rpx;
				.arrow-wrap{
					height: 100%;
					width: 80rpx;
					flex-shrink: 0;
					display: flex;
					align-items: center;
				}
				.text-warp{
					flex:1;
					text-align: v-bind(titleTextAlign);
					font-weight: bold;
				}
				.menu-wrap{
					height: 100%;
					width: 80rpx;
					flex-shrink: 0;
				}
			}
		}
		.block-warp{
			width: 100%;
			margin-top: v-bind(headHeight);
		}
	}
</style>
<template>
	<view class="mod-nav-bar">
		<view class="fixed-wrap">
			<view class="status-bar">
			</view>
			<view class="title-bar">
				<view class="arrow-wrap" v-if="showBack" @click.stop="navBack">
					<uni-icons type="left" size="28" class="icon" :color="titleColor"></uni-icons>
				</view>
				<view class="text-warp">
					{{title}}
				</view>
				<view class="menu-wrap">
				</view>
			</view>
		</view>
		<view class="block-warp"></view>
	</view>
</template>
<script setup>
	import { computed } from "vue"
	import {COLOR_THEME_PRIMARY} from "@/utils/config.js"
	import { useNavBarStyle} from "@/utils/system.js"
	const {statusBarHeight,titleBarHeight,headHeight} = useNavBarStyle()
	console.log(statusBarHeight.value,"statuBarHeight")
	const props = defineProps({
		title:{
			type:String,
			default:""
		},
		titleColor:{
			type:String,
			default:"#000"
		}
	})
//定义是否显示返回箭头
	const showBack =getCurrentPages().length > 1
//如果没有箭头改变样式
	const titleTextAlign = computed(()=>{
		if(!showBack) return 'left'
		return 'center'
	})
//页面返回
	const navBack = ()=>{
		console.log(11,"11")
		uni.navigateBack({
			success() {
				console.log("返回成功")
			},
			fail() {
				uni.reLaunch({
					url:"/pages/index/index",
					success() {
						console.log("返回到首页成功")
					},
					fail() {
						console.error("返回首页失败")
					}
				})
			}
		})
	}
</script>